<template>
  <div class="advanceConfig">
    <el-dialog :visible.sync="dialogStatus" customClass="advanceConfigDialog" :title="$t('configLazyLoad.channel.advInviteSet')" ref="advanceInvite" width="70%" :before-close="closeChoose" :close-on-click-modal="false">
      <div class="content">
        <el-row class="backgroundSet">
          <el-col :span="6" class="title font16" style="margin-top: 22px">
            {{$t('configLazyLoad.channel.backImg')}}
          </el-col>
          <el-col :span="18">
            <el-radio-group v-model.trim="advanceCfg.backgroundType" @change="backgroundTypeChange">
              <el-radio label="#3fb8fd">
                <div class="colorChoose" style="background: #3fb8fd"></div>
              </el-radio>
              <el-radio label="#26c1a3">
                <div class="colorChoose" style="background: #26c1a3"></div>
              </el-radio>
              <el-radio label="custColor">&nbsp;</el-radio>
              <div class="warpColor" style="margin-bottom: -14px;margin-right: 15px;">
                <el-color-picker v-model.trim="inviteStyle.backColor" class="fl" @change="colorPickChange"></el-color-picker>
                <el-input v-model.trim="inviteStyle.backColor" :minlength="1" :maxlength="7" class="fl" @blur="styleColorBlur"></el-input>
              </div>
              <el-radio label="custImg">
                &nbsp;
              </el-radio>
              <p class="custImg" style="display: inline-block"><span class="uploadBackImg" id="uploadBackImg">{{$t('configLazyLoad.channel.upImg')}}</span><span class="notes">{{$t('configLazyLoad.channel.supportPix')}}</span></p>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="6" class="title font16">
            {{$t('configLazyLoad.channel.inviteLayout')}}
          </el-col>
          <el-col :span="18">
            <div class="layout-choose">
              <img src="./../../../../../../assets/img/inviteLayout1.png" @click="changeLayout('1')" :class="{active: inviteStyle.layoutType === '1'}">
              <i class="iconfont icon-xuanzhong" v-show="inviteStyle.layoutType === '1'"></i>
            </div>
            <div class="layout-choose">
              <img src="./../../../../../../assets/img/inviteLayout2.png" @click="changeLayout('2')" :class="{active: inviteStyle.layoutType === '2'}">
              <i class="iconfont icon-xuanzhong" v-show="inviteStyle.layoutType === '2'"></i>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="title font16">
            {{$t('configLazyLoad.channel.inviteHandle')}}
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="12" class="preview">
              <div class="inviteBox"
               :style="{backgroundColor: advanceCfg.backgroundType !== 'custImg' && inviteStyle.backColor ? inviteStyle.backColor : '',
                        backgroundImage: advanceCfg.backgroundType === 'custImg' && inviteStyle.backImg ? 'url(' + inviteStyle.backImg + ')' : ''}">
                <i class="iconfont icon-guanbi previewClose" ></i>
                <div class="inviteBox_top">
                  <div class="top_img" :class="{top_img_nodata: !inviteStyle.photourl}" v-if="inviteStyle.layoutType === '1'" @click="showChangePhoto">
                    <img class="photo_img" v-show="inviteStyle.photourl" :src="inviteStyle.photourl">
                    <span v-show="!inviteStyle.photourl">{{$t('configLazyLoad.channel.upImg')}}</span>
                  </div>
                  <div class="top_right" :class="{width100: inviteStyle.layoutType === '2', marginLeft: inviteStyle.layoutType === '2' ? '0' : '10px'}">
                    <p class="Invite_words" v-show="inviteStyle.inviteWords" v-html="inviteStyle.inviteWords" @click="showChangeInviteWords">
                    </p>
                    <p class="Invite_words_nodata" @click="showChangeInviteWords" v-show="!inviteStyle.inviteWords">{{$t('configLazyLoad.channel.inputInvite')}}</p>
                    <div class="invite_buttons">
                      <button v-for="(btn, index) in inviteStyle.Buttons"  @click="showAddButton(btn, index)"
                              :style="{color : btn.color, borderColor:  btn.color, marginLeft: index === 0 ? '0': '10px'}">{{btn.text}}</button>
                      <button v-if="inviteStyle.Buttons.length < 2" @click="showAddButton('')">{{$t('configLazyLoad.channel.addButton')}}</button>
                    </div>
                  </div>
                </div>
                <div class="inviteBox_bottom">
                  <textarea class="sendtextarea" :placeholder="inviteStyle.placeholder" @click="showEditPlaceholder"></textarea>
                  <div class="textareaMask" @click="showEditPlaceholder"></div>
                  <button class="sendbutton" :style="{backgroundColor: inviteStyle.backColor}">{{$t('webchat.send')}}</button>
                </div>
              </div>
          </el-col>
          <el-col :span="12" class="editArea">
            <p class="header font16">{{$t('configLazyLoad.channel.editOption')}}</p>
            <div class="editPhoto" v-show="showEdit === 'editPhoto'">
              <p class="notes">{{$t('configLazyLoad.channel.supportPix2')}}</p>
              <div id="uploadPhotoImg" class="uploadPhotoImg">{{$t('configLazyLoad.channel.upImg')}}</div>
            </div>
            <div class="editInviteWords" v-show="showEdit === 'editInviteWords'">
              <p class="notes">{{$t('configLazyLoad.channel.inviteMessage')}}</p>
              <el-input style="width: 200px" size="mini" type="textarea" v-model="inviteStyle.inviteWords" @blur="inviteWordsBlur"></el-input>
            </div>
            <div class="editButtons" v-show="showEdit === 'editButtons'">
              <p class="notes">{{$t('configLazyLoad.channel.buttonFunc')}}</p>
              <div>
                <el-select v-model.trim="editButtonAction" style="width: 120px;margin-right: 10px">
                  <el-option value="openChat" :label="$t('configLazyLoad.channel.startTalk')"></el-option>
                  <el-option value="hideInvite" :label="$t('configLazyLoad.channel.hideInvite')"></el-option>
                </el-select>
                <el-input style="width: 140px;margin-left: 10px" :maxlength="5" v-model.trim="editButtonText" :placeholder="$t('configLazyLoad.channel.inputButtonContent')"></el-input>
              </div>
              <div style="margin-top: 15px">
                <span class="notes" style="margin-right: 20px">{{$t('configLazyLoad.channel.chooseColor')}}</span> <el-color-picker v-model.trim="editButtonColor"></el-color-picker>
              </div>
              <div class="savefooter">
                <button @click="saveAddButton" class="saveAddButton">{{$t('km.preview')}}</button>
              </div>

            </div>
            <div class="editPlaceholder" v-show="showEdit === 'editPlaceholder'">
              <p class="notes">{{$t('configLazyLoad.channel.inputMessage')}}</p>
              <el-input style="width: 200px" size="mini" type="textarea" :maxlength="50" v-model="inviteStyle.placeholder"></el-input>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="closeChoose" class="primary_btn">{{$t('webchat.cancel')}}</el-button>
        <el-button type="primary" @click="resetConfig" class="primary_btn">{{$t('configLazyLoad.channel.toDeafult')}}</el-button>
        <el-button type="primary" @click="saveAdvChoose" class="primary_btn">{{$t('configLazyLoad.channel.save')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {uploadTo7moorImDomain} from '@/utils/qiniuUtils'
  import {getCurrentDate, deepClone} from '@/utils/m7Utils'
  import * as uuid from 'uuid'
  export default {
    name: 'inviteAdvance',
    data () {
      return {
        editButtonIndex: '',
        editButtonColor: '',
        editButtonText: '',
        editButtonAction: '',
        dialogStatus: false,
        showEdit: '',
        advanceCfg: {
          backgroundType: ''
        },
        inviteStyle: {
          layoutType: '1',
          backColor: '',
          backImg: '',
          inviteWords: '',
          photourl: '',
          Buttons: [],
          placeholder: ''
        },
        initInviteStyle: {
          layoutType: '1',
          backColor: '#3fb8fd',
          backImg: '',
          inviteWords: '',
          photourl: '',
          Buttons: [],
          placeholder: ''
        },
        initAdvanceCfg: {
          backgroundType: '#3fb8fd'
        },
        m7uploaders: []
      }
    },
    props: ['inviteBoxData'],
    watch: {
      inviteBoxData () {
        this.initData()
      }
    },
    methods: {
      inviteWordsBlur () {
        if (this.inviteStyle.layoutType === '1') {
          if (this.inviteStyle.inviteWords.length > 22) {
            this.$message.error(this.$t('configLazyLoad.channel.dockingError2'))
          }
          this.inviteStyle.inviteWords = this.inviteStyle.inviteWords.substring(0, 22)
        } else if (this.inviteStyle.layoutType === '2') {
          if (this.inviteStyle.inviteWords.length > 30) {
            this.$message.error(this.$t('configLazyLoad.channel.dockingError3'))
            this.inviteStyle.inviteWords = this.inviteStyle.inviteWords.substring(0, 30)
          }
        }
      },
      showEditPlaceholder () {
        this.showEdit = 'editPlaceholder'
      },
      saveAddButton () {
        if (this.editButtonText === '') {
          this.$message.warning(this.$t('configLazyLoad.channel.inputButtonContent2'))
          return
        }
        if (this.editButtonColor === null) {
          this.$message.warning(this.$t('configLazyLoad.channel.dockingError4'))
          return
        }
        let button = {
          action: this.editButtonAction,
          text: this.editButtonText,
          color: this.editButtonColor
        }
        if (this.editButtonIndex !== undefined && this.editButtonIndex !== '') {
          this.$set(this.inviteStyle.Buttons, this.editButtonIndex, button)
          this.inviteStyle.Buttons.splice(this.editButtonIndex, 1, button)
        } else {
          this.inviteStyle.Buttons.push(button)
        }
        this.editButtonIndex = ''
        this.showEdit = ''
      },
      showAddButton (btn, index) {
        if (btn) {
          this.editButtonIndex = index
          this.editButtonAction = btn.action
          this.editButtonText = btn.text
          this.editButtonColor = btn.color
        } else {
          this.editButtonAction = 'openChat'
          this.editButtonText = ''
          this.editButtonColor = '#ffffff'
        }
        this.showEdit = 'editButtons'
      },
      showChangeInviteWords () {
        this.showEdit = 'editInviteWords'
      },
      showChangePhoto () {
        this.showEdit = 'editPhoto'
      },
      colorPickChange (color) {
        if (color === null) {
          this.$message.error(this.$t('configLazyLoad.channel.dockingError5'))
          this.inviteStyle.backColor = '#3fb8fd'
          this.inviteStyle.backImg = ''
          this.advanceCfg.backgroundType = '#3fb8fd'
          return
        }
        this.advanceCfg.backgroundType = 'custColor'
      },
      backgroundTypeChange (type) {
        if (type === '#3fb8fd') {
          this.inviteStyle.backColor = '#3fb8fd'
          this.inviteStyle.backImg = ''
        } else if (type === '#26c1a3') {
          this.inviteStyle.backColor = '#26c1a3'
          this.inviteStyle.backImg = ''
        } else if (type === 'custColor') {
          this.inviteStyle.backImg = ''
        } else if (type === 'custImg') {
          this.inviteStyle.backColor = ''
        }
      },
      resetConfig () {
        this.advanceCfg = deepClone(this.initAdvanceCfg)
        this.inviteStyle = deepClone(this.initInviteStyle)
      },
      saveAdvChoose () {
        this.$emit('saveAdvance', {
          advanceCfg: this.advanceCfg,
          inviteStyle: this.inviteStyle
        })
        this.dialogStatus = false
      },
      initData () {
        if (this.inviteBoxData.inviteStyle) {
          this.inviteStyle = deepClone(this.inviteBoxData.inviteStyle)
        } else {
          this.inviteStyle = deepClone(this.initInviteStyle)
        }
        if (this.inviteBoxData.advanceCfg) {
          this.advanceCfg = deepClone(this.inviteBoxData.advanceCfg)
        } else {
          this.advanceCfg = deepClone(this.initAdvanceCfg)
          if (this.inviteStyle.backColor === '#3fb8fd') {
            this.advanceCfg.backgroundType = '#3fb8fd'
          } else if (this.inviteStyle.backColor === '#26c1a3') {
            this.advanceCfg.backgroundType = '#26c1a3'
          }
        }
      },
      changeLayout (type) {
        this.inviteStyle.layoutType = type
      },
      styleColorBlur () {
        let reg = /^#([0-9a-fA-F]{6})$/
        if (!reg.test(this.inviteStyle.backColor)) {
          this.$message.error(this.$t('configLazyLoad.channel.dockingError6'))
          this.inviteStyle.backColor = '#3fb8fd'
          this.inviteStyle.backImg = ''
          this.advanceCfg.backgroundType = '#3fb8fd'
          return
        }
        this.advanceCfg.backgroundType = 'custColor'
      },
      initUploadImg (type) {
        let account = this.$store.state.session.user.account
        let self = this
        let fileAdded = function (up, files) {
          console.log('fileAdd')
        }
        let beforeUpload = function (up, file) {
          console.log('beforeUpload1')
        }
        let uploadProgress = function (up, file) {
          console.log('uploadProgress1')
        }
        let uploadComplete = function (up, file) {
          console.log('uploadComplete1')
        }
        let fileUploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          if (!sourceLink) {
            return
          }
          if (type === 'backImg') {
            self.advanceCfg.backgroundType = 'custImg'
            self.inviteStyle.backImg = sourceLink
          } else if (type === 'photoImg') {
            self.inviteStyle.photourl = sourceLink
          }
          self.$message(this.$t('configLazyLoad.channel.uploadSucc'))
        }
        let error = function (up, err, errTip) {
          if (errTip) {
            self.$message.error(errTip)
          }
          console.log('uploadError ' + errTip)
        }
        let key = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let key = account + '/km/' + date + '/' + time + '/' + uuid.v1() + file.name
          return key
        }
        let filters = {
          mime_types: [
            {title: 'Image files', extensions: 'jpg,gif,png'}
          ]
        }
        let id = type === 'backImg' ? 'uploadBackImg' : 'uploadPhotoImg'
        this.m7uploaders.push(
          uploadTo7moorImDomain(this.$store.state.session.user._id, id, filters, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, key)
        )
      },
      closeChoose () {
        this.$emit('cancel')
        this.dialogStatus = false
      }
    },
    mounted () {
      this.dialogStatus = true
      this.$nextTick(() => {
        this.initUploadImg('backImg')
        this.initUploadImg('photoImg')
      })
    },
    beforeMount () {
      this.initData()
    },
    beforeDestroy () {
      this.m7uploaders.forEach(uploader => {
        uploader &&
        uploader.destroy &&
        uploader.destroy()
      })
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .advanceConfig
    .content
      .title
        text-align center
      .colorChoose
        display inline-block
        width 60px
        height 26px
        border-radius 3px
        vertical-align middle
        cursor pointer
      .warpColor
        display inline-block
        height 36px
        margin-top 10px
        .el-input
          width 100px
          margin 3px 0 0 10px
      .custImg
        color $c-main
        font-size 14px
        display inline-block
        text-align left
        .uploadBackImg
          margin 6px 0 0 0
          min-width 90px
          height 24px
          border 1px solid $c-main
          line-height 24px
          text-align center
          display inline-block
          border-radius 3px
          cursor pointer
        .notes
          margin-left 10px
          color $cf-level2
      .layout-choose
        display inline-block
        margin 0 20px
        position relative
        img
          width 120px
          cursor pointer
        .active
          border: 1px solid $c-main
          border-radius 5px
        i
          width 20px
          height 20px
          border-radius 10px
          position: absolute
          bottom -10px
          right -10px
          color: white;
          text-align: center;
          font-size: 14px;
          line-height: 20px;
          background $c-main
      .preview
        border-right 2px solid $c-border1
        display inline-block
        height 200px
        position relative;
        .inviteBox
          background-size: cover;
          background-repeat: no-repeat;
          position absolute
          bottom 10px
          right 10px
          width: 320px;
          height: 175px;
          border-radius: 5px;
          box-shadow: 0 0 3px 2px rgba(53, 53, 53, 0.1);
          border-width: 1px;
          border-color: #19CAA6;
          overflow: hidden;
          .previewClose
            width: 16px;
            height: 16px;
            cursor: pointer;
            position: absolute;
            color #fff
            top: 3px;
            right: 3px;
          .inviteBox_top
            height: 88px;
            padding: 10px 25px;
            .top_img
              cursor pointer
              display: inline-block;
              width: 70px;
              height: 84px;
              float: left;
              .photo_img
                max-width: 100%;
                max-height: 100%;
            .top_img_nodata
              border: 1px solid white;
              color: #fff;
              text-align: center;
              line-height: 84px;
              font-size: 14px;
            .top_right
              display: inline-block;
              float: left;
              height: 84px;
              margin-left: 10px;
              width: 180px;
              position: relative;
              .Invite_words
                width: 100%;
                font-size: 16px;
                line-height: 18px;
                max-height: 36px;
                overflow: hidden;
                color: #fff;
                margin: 5px;
                cursor pointer
              .Invite_words_nodata
                width: 100%;
                font-size: 16px;
                line-height: 36px;
                max-height: 36px;
                overflow: hidden;
                color: #fff;
                margin: 5px;
                border: 1px solid white;
                text-align: center;
                cursor pointer
              .invite_buttons
                position: absolute;
                width: 100%;
                bottom: 5px;
                text-align: center;
                button
                  color: #fff;
                  outline: none;
                  background: none;
                  border: 1px #fff solid;
                  height 24px
                  line-height 24px
                  border-radius: 4px;
                  cursor: pointer;
                  margin-left: 10px;
            .width100
              width 100%
          .inviteBox_bottom
            margin: 0 2px;
            height: 64px;
            width: 316px;
            position: relative;
            .sendtextarea
              box-sizing: border-box;
              outline: none;
              resize: none;
              position: absolute;
              left: 0;
              top: 0;
              border: none;
              width: 100%;
              height: 100%;
              padding: 10px 5px;
              margin: 0;
            .textareaMask
              width 100%
              height 100%
              position absolute
              cursor pointer
              top 0
              left 0
            button
              position: absolute;
              bottom: 3px;
              right: 4px;
              cursor: pointer;
              outline: none;
              background: #3fb8fd;
              color: #fff;
              border: none;
              padding: 2px 10px;
              border-radius: 5px;
      .editArea
        display inline-block
        padding-left 15px
        .header
          font-weight bold
        .notes
          padding: 10px 0px
        .editPhoto
          padding-left 15px
          .uploadPhotoImg
            border: 1px solid $c-main;
            color: $c-main;
            text-align: center;
            line-height: 84px;
            font-size: 14px;
            width: 80px;
            cursor: pointer;
        .editButtons
          padding-left 15px
          .savefooter
            width 280px
            text-align right
            .saveAddButton
              margin 6px 0 0 0
              min-width 60px
              height 24px
              border 1px solid $c-main
              color $c-main
              line-height 24px
              text-align center
              display inline-block
              background #fff
              border-radius 3px
              cursor pointer
        .editInviteWords
          padding-left 15px
        .editPlaceholder
          padding-left 15px
</style>
